<template>
  <div class="terms-page">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <div class="terms-content">
            <h1 class="terms-title">使用条款</h1>
            <p class="last-updated">最后更新时间：{{ new Date().toLocaleDateString("zh-CN") }}</p>

            <div class="terms-section">
              <h2>1. 接受条款</h2>
              <p>
                欢迎使用数知笔记。通过访问或使用我们的网站，您同意受本使用条款的约束。
                如果您不同意这些条款，请不要使用我们的服务。
              </p>
            </div>

            <div class="terms-section">
              <h2>2. 服务描述</h2>
              <p>数知笔记是一个专注于技术分享和知识传播的博客平台，提供：</p>
              <ul>
                <li>高质量的技术文章和教程</li>
                <li>技术资源和工具推荐</li>
                <li>编程相关的经验分享</li>
                <li>技术社区交流平台</li>
              </ul>
            </div>

            <div class="terms-section">
              <h2>3. 用户行为规范</h2>
              <p>在使用我们的服务时，您同意：</p>
              <ul>
                <li>不发布违法、有害或不当的内容</li>
                <li>不进行任何形式的商业垃圾信息传播</li>
                <li>尊重他人的知识产权和隐私权</li>
                <li>不干扰或破坏网站的正常运行</li>
                <li>遵守相关法律法规和社区规范</li>
              </ul>
            </div>

            <div class="terms-section">
              <h2>4. 知识产权</h2>
              <p>
                本网站的所有内容，包括但不限于文字、图片、代码、设计等，
                均受版权法保护。未经我们明确授权，不得复制、分发或修改这些内容。
              </p>
              <p>
                用户提交的内容仍归用户所有，但用户授予我们在本平台使用、
                展示和分发这些内容的非排他性许可。
              </p>
            </div>

            <div class="terms-section">
              <h2>5. 免责声明</h2>
              <p>
                我们努力确保网站信息的准确性，但不保证所有内容的完全准确性或完整性。
                用户使用本网站信息所产生的任何后果，我们不承担责任。
              </p>
              <p>本网站可能包含第三方链接，我们不对这些外部网站的内容或安全性负责。</p>
            </div>

            <div class="terms-section">
              <h2>6. 服务变更</h2>
              <p>
                我们保留随时修改、暂停或终止服务的权利，无需事先通知。
                我们会尽力提前通知重大变更，但不保证在所有情况下都能做到。
              </p>
            </div>

            <div class="terms-section">
              <h2>7. 隐私保护</h2>
              <p>
                我们重视用户隐私，会按照我们的隐私政策处理用户信息。 请查看我们的
                <router-link to="/privacy-policy" class="policy-link">隐私政策</router-link>
                了解详情。
              </p>
            </div>

            <div class="terms-section">
              <h2>8. 争议解决</h2>
              <p>
                因使用本网站而产生的任何争议，应通过友好协商解决。
                如果协商不成，争议将提交有管辖权的法院解决。
              </p>
            </div>

            <div class="terms-section">
              <h2>9. 条款修改</h2>
              <p>
                我们可能会不时更新这些使用条款。重大变更时，
                我们会在网站上发布通知。继续使用服务即表示您接受修改后的条款。
              </p>
            </div>

            <div class="terms-section">
              <h2>10. 联系方式</h2>
              <p>如果您对这些使用条款有任何疑问，请通过以下方式联系我们：</p>
              <ul>
                <li>邮箱：903580396@qq.com</li>
                <li>
                  联系页面：
                  <router-link to="/contact" class="policy-link">联系我们</router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 页面逻辑
</script>

<style lang="scss" scoped>
.terms-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 40px 0;

  .terms-content {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    @media (max-width: 768px) {
      padding: 20px;
    }
  }

  .terms-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 2rem;
    }
  }

  .last-updated {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 40px;
  }

  .terms-section {
    margin-bottom: 30px;

    h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #34495e;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #3498db;
    }

    p {
      line-height: 1.8;
      color: #555;
      margin-bottom: 15px;
    }

    ul {
      padding-left: 20px;

      li {
        margin-bottom: 8px;
        line-height: 1.6;
        color: #555;
      }
    }

    .policy-link {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
